<template>
	<div style="width: 100%;height: 100%;">
		<div class="title">
			<div class="list-title">地区</div>
			<div class="list-title">用户名</div>
			<div class="list-title">回收物</div>
			<div class="list-title">回收量</div>
			<div class="list-title">时间</div>
		</div>
		<div class="infos" >	
				<ul id="scroll-data">	
					<!-- <li class="info">
							<div class="list-info">小区</div>
							<div class="list-info">小区</div>
							<div class="list-info">小区</div>
							<div class="list-info">小区</div>
							<div class="list-info">小区1</div>
					</li> -->
		
				</ul>
				
		</div>
	</div>
</template>

<script>
	export default {
		name: 'scroll',
		props:['scrolldata'],
		data() {
			return {
				

			}
		},
		methods: {
			
		},
		watch:{
			scrolldata(newval,oldval){
				var cent = document.getElementById("scroll-data");
				cent.innerHTML=''
				if(newval.length!==0){
					for(var i = 0; i < newval.length; i++) {
						cent.innerHTML += "<li class='info'>"+ 
									"<div  class='list-info'>" + newval[i].comminName + "</div>"+
									"<div class='list-info'>" + newval[i].userName + "</div>" +
									"<div class='list-info'>" + newval[i].garbageTypeName + "</div>" +
									"<div class='list-info'>" + newval[i].garbageNumber + "</div>" +
									"<div class='list-info'>" + newval[i].recycleTime + "</div>" +
									"</li>";
					}
					for(var i = 0; i < 4; i++) {
						cent.innerHTML += "<li class='info'>"+ 
									"<div  class='list-info'>" + newval[i].comminName + "</div>"+
									"<div class='list-info'>" + newval[i].userName + "</div>" +
									"<div class='list-info'>" + newval[i].garbageTypeName + "</div>" +
									"<div class='list-info'>" + newval[i].garbageNumber + "</div>" +
									"<div class='list-info'>" + newval[i].recycleTime + "</div>" +
									"</li>";
					}
				}
			}
		}
	}
</script>

<style>
	.title{
		width: 100%;
		height: 20%;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
	}
	.list-title{
		width:20%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 20px;
		font-weight: 700;
		/* color: #FFFFFF; */
	}
	.infos{
		width: 100%;
		height: 80%;
		overflow: hidden;
		text-align: center;
	}
	
	@keyframes myMove {
	  0% {
	    transform: translateY(0);
	  }
	  100% {
	    transform: translateY(-500%);
	  }
	}
	
	.infos>ul{
		animation: myMove 20s linear infinite;
		animation-fill-mode: forwards;
		width: 100%;
		height: 100%;
		list-style: none;
		padding: 0;
		margin: 0;
	}
	.infos>ul>li{
		width: 100%;
		height: 25%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	
	.list-info{
		width:20%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
